<script setup>
import { ref, h, watch } from 'vue';
import {
    AppstoreOutlined, 
    SettingFilled, 
    FundOutlined, 
    PieChartOutlined,
    DotChartOutlined,
    HeatMapOutlined,
    LeftOutlined,
    RightOutlined
} from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { useSystemStore } from '@/store';

const openKeys = ref([]);
const selectedKeys = ref([]);
const router = useRouter();
const systemStore = useSystemStore();
const inlineCollapsed = ref(false);

const emits = defineEmits(['change']);

const items = [
    {
        key: '/patient',
        icon: h(AppstoreOutlined),
        label: '患者数据管理'
    },
    {
        key: '/inspect',
        icon: h(PieChartOutlined),
        label: '检验数据管理'
    },
    {
        key: '/medicine',
        icon: h(DotChartOutlined),
        label: '药品数据管理'
    },
    {
        key: '/adr',
        icon: h(HeatMapOutlined),
        label: 'ADR数据管理'
    },
    {
        key: '/adr-prediction',
        icon: h(FundOutlined),
        label: 'ADR预测'
    },
    {
        key: '/setting',
        icon: h(SettingFilled),
        label: '系统设置',
        children: [
            {
                key: '/users',
                label: '用户管理'
            },
            {
                key: '/roles',
                label: '角色/权限管理'
            }
        ]
    }
];

function handleClick(info) {
    router.push(info.key);
    emits('change', info);
}

function toggleCollapsed() {
    inlineCollapsed.value = !inlineCollapsed.value;
}

</script>

<template>
    <div class="layout-menu" :style="{width: inlineCollapsed ? '80px' : '200px'}">
        <div class="menu-container">
            <a-menu
                v-model:openKeys="openKeys"
                v-model:selectedKeys="systemStore.activeRouter"
                :inlineCollapsed="inlineCollapsed"
                :items="items"
                mode="inline"
                style="height: 100%;"
                @click="handleClick"
            />
        </div>
        <div class="coll">
            <a-button type="link" @click="systemStore.toggleCollapsed">
                <LeftOutlined v-if="!inlineCollapsed" style="font-size: 16px;color: #aaa;" @click="toggleCollapsed" />
                <RightOutlined v-else style="font-size: 16px;color: #aaa;" @click="toggleCollapsed" />
            </a-button>
        </div>
    </div>
</template>

<style lang="less" scoped>
.layout-menu {
    background-color: @bg-color;
    height: calc(100vh - 48px);
    transition: all 0.3s ease;

    .menu-container {
        height: calc(100% - 48px);
    }

    .coll {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 48px;
        border-top: 1px solid @border-color;
        border-right: 1px solid @border-color;
    }
}
</style>